<template>
  <div>
    <el-button size="small" @click="createChild" type="primary"
      >添加参数</el-button
    >
    <el-table
      class="mt-2"
      :data="formItems"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :show-header="false"
    >
      <el-table-column prop="date" label="" sortable width="200">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            size="small"
            placeholder="field"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="" sortable width="200">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.default"
            size="small"
            placeholder="参数示例"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="">
        <template slot-scope="scope">
          <span class="grow flex">
            <el-input
              v-model="scope.row.description"
              placeholder="备注"
              size="small"
            ></el-input>
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="date" label="" sortable width="60">
        <template slot-scope="scope">
          <span class="flex items-center">
            <i
              @click="remove(scope.row)"
              class="el-icon-close ms-1 cursor-pointer"
            ></i>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
    
    <script>
import { ref } from "@vue/composition-api";

export default {
  setup() {
    const formItems = ref([
      // {
      //   id: 1,
      //   field: "",
      //   example: "",
      //   remark: "",
      // },
    ]);

    const typeOptions = ["string", "file"];

    let i = 1;
    function createChild() {
      formItems.value.push({
        id: ++i,
        name: "",
        default: "",
        description: "",
      });
    }
    function remove(ele) {
      const index = formItems.value.findIndex((item) => item === ele);
      formItems.value.splice(index, 1);
    }

    function setFormItems(value) {
      formItems.value = value.filter(item => item.in === 'header').map((item) => {
        const it = {
          id: i++,
          ...item,
        };
        return it;
      });
      console.log(formItems.value);
    }

    function getFormItems() {
      return formItems.value.map((item) => {
        // const { id, ...result } = item
        const result = {
          name: item.name,
          in: "header",
          description: item.description,
          default: item.default,
          required: item.required,
          schema: {
            type: "string",
          },
          // style: "form",
        };
        return result;
      });
    }

    return {
      formItems,
      typeOptions,
      createChild,
      remove,
      setFormItems,
      getFormItems
    };
  },
};
</script>
    
    <style scoped>
</style>